<template>
  <ve-bar
    :data="axisOption"
    :settings="chartSettings"
    :extend="chartExtend"
    ref="vebar"
    :events="chartPEvents"
    height="750px"
    :judge-width="true"
  ></ve-bar>
</template>

<script>
import * as echarts from "echarts/lib/echarts.js";
export default {
  props: {
    chartData: {
      type: Object,
      default() {
        return {
          columns: [],
          rows: [],
        };
      },
    },
  },
  data() {
    // this.chartSettings = {
    //   stack: {
    //     xxx: ["访问用户", "下单用户"],
    //   },
    // };
    const _this = this;
    // 饼图点击事件
    this.chartPEvents = {
      click: function (e) {
        _this.getNotChartData(e);
      },
    };
    this.yAxis = {
      // 显示Y轴
      show: true,
      // 其他Y轴设置...
    };
    return {
      chartExtend: {},
      chartSettings: {
        dataOrder: {
          //按照由大到小进行排序
          label: "评论数",
          order: "desc",
        },
        stack: {
          xxx: [],
        },
      },
      axisOption: {},
      // chartData: {
      //   columns: ["日期", "访问用户", "下单用户"],
      //   rows: [
      //     { 日期: "台", 访问用户: 1393, 下单用户: 1093 },
      //     { 日期: "台", 访问用户: 3530, 下单用户: 3230 },
      //     { 日期: "台", 访问用户: 2923, 下单用户: 2623 },
      //     { 日期: "台", 访问用户: 1723, 下单用户: 1423 },
      //     { 日期: "台", 访问用户: 3792, 下单用户: 3492 },
      //     { 日期: "台", 访问用户: 4593, 下单用户: 4293 },
      //   ],
      // },
    };
  },
  watch: {
    chartData: {
      handler: function (newnew, oldold) {
        this.axisOption.columns = [];
        this.axisOption.rows = [];

        this.initChart();
        // this.chartSettings.stack.xxx = this.chartData.columns.shift();
        // 这里需要让表格重新绘制一下，否则会产生固定列错位的情况

        // console.log(new Date());
        this.$nextTick(() => {
          // this.$refs.table.doLayout();
          this.$refs.vebar.echarts.resize();
          // console.log('渲染完成时间', new Date());
        });
      },
      deep: true,
      immediate: true,
    },
  },
  methods: {
    getNotChartData(e) {
      console.log(e.name);
      // return;
      this.$emit("vchartData", e.name);
    },
    initChart() {
      this.axisOption = this.chartData;
      // if (this.axisOption.columns == []) {
      //   return;
      // }
      let newArr = this.chartData.columns.slice(1);
      this.chartSettings.stack = {
        xxx: newArr,
      };
      // let stack = this.chartData.columns;
      // stack.shift();
      // console.log(JSON.stringify(stack));

      // // return;
      // // this.chartSettings.stack.xxx = [];
      // this.chartSettings.stack.xxx = stack; Right
      this.chartExtend = {
        grid: {
          show: true,
          borderWidth: 1,
        },

        yAxis: {
          show: true,
        },
        series(v) {
          v.forEach((i) => {
            i.barWidth = 15;
            i.barGap = 0;
            i.itemStyle = {
              normal: {
                label: {
                  show: true,
                  position: "inside",
                  textStyle: {
                    fontSize: "12",
                    colcor: "red",
                  },
                },
              },
            };
          });
          return v;
        },
        // yAxis(v) {
        //   v.forEach((i) => {
        //     i.show = true;
        //     i.splitLine = { show: false };
        //     i.axisTick = { show: false };
        //     i.axisLine = { show: false };
        //   });
        //   return v;
        // },
        // xAxis(v) {
        //   v.forEach((i) => {
        //     i.show = false;
        //     i.splitLine = { show: false };
        //     i.axisTick = { show: true };
        //     i.axisLine = { show: true };
        //   });
        //   return v;
        // },
      };
    },
  },
};
</script>